<!-- 雷达图 -->
<template>
	<el-card>
		<template #header> 订单状态雷达图 </template>
		<div :id="id" :class="className" :style="{ height, width }"></div>
	</el-card>
</template>

<script setup lang="ts">
	import * as echarts from "echarts";

	const props = defineProps({
		id: {
			type: String,
			default: "radarChart",
		},
		className: {
			type: String,
			default: "",
		},
		width: {
			type: String,
			default: "200px",
			required: true,
		},
		height: {
			type: String,
			default: "200px",
			required: true,
		},
	});

	const options = {
		grid: {
			left: "2%",
			right: "2%",
			bottom: "10%",
			containLabel: true,
		},
		legend: {
			x: "center",
			y: "bottom",
			data: ["预定数量", "下单数量", "发货数量"],
			textStyle: {
				color: "#999",
			},
		},
		radar: {
			// shape: 'circle',
			radius: "60%",
			indicator: [
				{ name: "家用电器" },
				{ name: "服装箱包" },
				{ name: "运动户外" },
				{ name: "手机数码" },
				{ name: "汽车用品" },
				{ name: "家具厨具" },
			],
		},
		series: [
			{
				name: "Budget vs spending",
				type: "radar",
				itemStyle: {
					borderRadius: 6,
					color: function (params : any) {
						//自定义颜色
						const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
						return colorList[params.dataIndex];
					},
				},
				data: [
					{
						value: [400, 400, 400, 400, 400, 400],
						name: "预定数量",
					},
					{
						value: [300, 300, 300, 300, 300, 300],
						name: "下单数量",
					},
					{
						value: [200, 200, 200, 200, 200, 200],
						name: "发货数量",
					},
				],
			},
		],
	};

	const chart = ref<any>("");

	onMounted(() => {
		chart.value = markRaw(
			echarts.init(document.getElementById(props.id) as HTMLDivElement)
		);

		chart.value.setOption(options);

		window.addEventListener("resize", () => {
			chart.value.resize();
		});
	});

	onActivated(() => {
		if (chart.value) {
			chart.value.resize();
		}
	});
</script>